<template>
    <div class="orderListRuleForm">
        <panle title='公域订单' content="公域订单列表，可做详细检索。"></panle>

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="课程名称" prop="course_name">
                <el-input size="mini" placeholder="请输入课程名称" v-model="form.course_name" clearable></el-input>
            </el-form-item>
            <el-form-item label="订单号" prop="order_num">
                <el-input size="mini" placeholder="请输入订单号" v-model="form.order_num" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
                <el-input size="mini" placeholder="请输入手机号" v-model="form.tel" clearable></el-input>
            </el-form-item>
            <el-form-item label="订单平台" prop="order_platform">
                <el-select size="mini" v-model="form.order_platform" placeholder="请选择" clearable>
                    <el-option v-for="item in orderplatform" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单来源" prop="order_from">
                <el-select size="mini" v-model="form.order_from" placeholder="请选择" clearable>
                    <el-option v-for="item in orderfrom" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态" prop="state">
                <el-select size="mini" v-model="form.state" placeholder="请选择" clearable>
                    <el-option v-for="item in orderstate" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付状态" prop="pay_state">
                <el-select size="mini" v-model="form.pay_state" placeholder="请选择" clearable>
                    <el-option v-for="item in orderpaystate" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分配助教" prop="user_name">
                <el-input size="mini" placeholder="请输入助教名称" v-model="form.user_name" clearable></el-input>
            </el-form-item>
            <el-form-item label="是否领课" prop="signin_status">
                <el-select size="mini" v-model="form.signin_status" placeholder="请选择" clearable>
                    <el-option v-for="item in signin_status_arr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付时间" prop="pay_time">
                <el-date-picker
                    clearable
                    v-model="form.pay_time"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="创建时间" prop="create_time">
                <el-date-picker
                    clearable
                    v-model="form.create_time"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <!--<pers-button type="primary" size="mini" @click="search" perms="live:order:search" label="搜索"></pers-button>-->
                <!--<pers-button size="mini" @click="resetForm('form')" perms="live:order:reset" label="重置"></pers-button>-->
                <!--<pers-button size="mini" @click="init()" perms="live:order:flushed" label="刷新"></pers-button>-->
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
                <vue-json-excel
                    style="display: inline;margin-left: 10px;"
                    :data="tableData"
                    :fields="excelFields"
                    name="导出订单.xlsx"
                    type="xlsx"
                >
                    <el-button size="mini">导出</el-button>
                </vue-json-excel>
            </el-form-item>
        </el-form>
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" row-key="id" border stripe style="width: 100%;margin-bottom: 20px;">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                <el-table-column prop="id" label="ID" width="60" sortable></el-table-column>
                <el-table-column prop="short_code" label="短编码"></el-table-column>
                <el-table-column label="微信">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.user" :src="scope.row.user.wx_avatar" fit="cover"
                                  style="width: 20px; height: 20px"></el-image> {{scope.row.user?scope.row.user.wx_name:''}}
                    </template>
                </el-table-column>
                <el-table-column prop="order_num" label="订单号"></el-table-column>
                <el-table-column prop="course.title" label="课程名称"></el-table-column>
                <el-table-column prop="tel" label="下单手机号" width="100">
                    <template slot-scope="scope">
                        <el-popover
                            v-if="scope.row.tel"
                            placement="right"
                            trigger="focus">
                            {{scope.row.tel}}
                            <pers-button slot="reference" icon="el-icon-view" label="——" size="mini" perms="public:order:tel"></pers-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="pay_time" label="支付时间"></el-table-column>
                <el-table-column prop="order_status" label="订单状态"></el-table-column>
                <el-table-column prop="pay_state" label="支付状态"></el-table-column>
                <el-table-column prop="total_fee" label="支付金额"></el-table-column>
                <el-table-column prop="pingtai" label="订单平台"></el-table-column>
                <el-table-column prop="isfinished" label="是否领课"></el-table-column>
                <el-table-column prop="order_from" label="补发短信" width="120">
                    <template slot-scope="scope">
                        <pers-button v-if="scope.row.pay_state == '已支付' && scope.row.order_status == '正常单' && scope.row.isfinished == 0 && scope.row.tel != ''" icon="fa fa-maxcdn" label="补发短信" size="mini" @click="sendSms(scope.row)" perms="public:order:tel"></pers-button>
                    </template>
                </el-table-column>
                <el-table-column prop="send_sms" label="发送短信"></el-table-column>
                <el-table-column prop="voice_tel" label="语音电话"></el-table-column>
                <el-table-column label="预分配助教">
                    <template slot-scope="scope">{{scope.row.orderCode ? scope.row.orderCode.teacher_id : ''}}</template>
                </el-table-column>
                <el-table-column label="已加助教">
                    <template v-if="scope.row.user" slot-scope="scope">{{scope.row.users.length > 1 ? scope.row.users_text : scope.row.user.zhujiao}}</template>
                    <template v-else slot-scope="scope"></template>
                </el-table-column>
                <el-table-column label="打开短信">
                    <template slot-scope="scope">{{scope.row.orderCode ? scope.row.orderCode.open_sms : ''}}</template>
                </el-table-column>
                <el-table-column label="打开小程序">
                    <template slot-scope="scope">{{scope.row.orderCode ? scope.row.orderCode.open_app : ''}}</template>
                </el-table-column>
                <el-table-column label="添加预分配助教">
                    <template slot-scope="scope">{{scope.row.orderCode ? scope.row.orderCode.add_code : ''}}</template>
                </el-table-column>
                <el-table-column prop="laiyuan" label="订单来源"></el-table-column>
                <el-table-column prop="time" label="创建时间"></el-table-column>
                <el-table-column prop="state" label="私域操作" fixed="right" v-if="isShow(['live:order:refund'])">
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" label="退款" icon="fa  fa-undo" perms="live:order:refund"
                                    @click="tuikuan(scope.row)" v-if="scope.row.state==1 || (scope.row.state == 3 && scope.row.part_type ==2 )"></PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                               :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper"
                               :total="form.total"></el-pagination>
            </div>
        </div>

        <!--弹出层  填写退款原因-->
        <el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body title="申请退款">
            <el-form ref="form2" :model="form2" :rules="from2Rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="金额" prop="amount">
                            <el-input type="number" requ v-model="form2.amount" min="0" placeholder="请输入金额"
                                      size="small"/>
                        </el-form-item>
                        <el-form-item label="退款原因" prop="reason">
                            <el-input type="textarea" v-model="form2.reason" placeholder="请输入内容" size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <!--<el-button type="primary" @click="submitForm('form2')" size="small">确 定</el-button>-->
                <pers-button type="primary" size="small" @click="submitForm('form2')" perms="live:order:refund_on"
                             label="确 定"></pers-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>

import Panle from '@/components/Panle';
import {getOrderData, refund, getOrderSource, sendSms} from '@/api/live/public';
import PersButton from '@/components/PersButton';
import debounce from '@/common/debounce.js';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {getSelectPlatform} from '@/api/scrm/looseCode/looseCode';

export default {
    name:'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            loading: false,
            signin_status_arr: [{
                value: 0,
                label: '未领课'
            }, {
                value: 1,
                label: '已领课'
            }],
            open: false,
            orderplatform: [],
            orderfrom: [],
            orderstate: [{
                value: 0,
                label: '未支付'
            }, {
                value: 1,
                label: '正常单'
            }, {
                value: 2,
                label: '退单中'
            }, {
                value: 3,
                label: '退单成功'
            }, {
                value: 4,
                label: '退单失败'
            }],
            orderpaystate: [{
                value: 0,
                label: '未支付'
            }, {
                value: 1,
                label: '已支付'
            }, {
                value: 2,
                label: '已退款'
            }],
            tableData: [],
            form: {
                order_num: '',
                course_name: '',
                order_from: '',
                tel: '',
                state: '',
                create_time: [],
                pay_time: [],
                pay_state: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                liveId: [],
                user_name: '',
                signin_status: ''
            },
            form2: {
                "id": '',
                "reason": ''
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            from2Rules: {
                amount: [
                    {required: true, message: '请输入金额', trigger: 'change'},
                ],
                reason: [
                    {required: true, message: '请输入退款原因', trigger: 'change'},
                ],
            },
            excelFields: {
                "订单号": "order_num",
                "订单状态": "statename",
                "课程名称": "course_name",
                "金额": "fee2",
                "下单手机号": "tel",
                "微信昵称": "nickname",
                "接量助教": "jieliangzhujiao",
                "私域助教": "nick_name",
                "订单来源": "order_from",
                "支付时间": "pay_time",
                "创建时间": "create_time",
                "支付方式": "pay_method"
            }

        }
    },
    created() {

        // 订单平台选项
        getSelectPlatform().then((res) => {
            if (res.code == 200) {
                this.orderplatform = res.data;
            }
        })
        // 订单来源
        getOrderSource().then((res) => {
            if (res.code == 200) {
                this.orderfrom = res.data;
            }
        })

        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        indexMethod(index) {
            return index+1;
        },
        init() {
            this.loading = true;
            console.log('init', this.form);
            getOrderData(this.form).then(res => {
                let list = res.data.list;
                list.forEach((item) => {
                    if (item.user) {
                        if (item.users.length > 1) {
                            let users_text = '';
                            item.users.forEach((value) => {
                                console.log('users-item', value)
                                if (value.zhujiao) {
                                    // users_text.push(value.zhujiao);
                                    users_text += ',' + value.zhujiao;
                                }
                            })
                            item.users_text = item.user.zhujiao;
                        } else {
                            item.users_text = '';
                        }
                    } else {
                        item.users_text = '';
                    }
                })
                this.tableData = list;
                console.log('tableData', this.tableData);
                this.form.total = res.data.total;
                this.loading = false;
            })
        },
        search: function () {
            // this.loading = true;
            this.form.pageNumber = 1;
            this.form.pageSize = 10;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.init();
        },
        tuikuan: function (e) {

            this.form2 = {
                "id": e.id,
                "reason": e.reason
            };
            this.open = true;

        },
        submitForm(e) {
            debounce(() => {
                // console.log(e);
                this.$refs[e].validate((valid) => {
                    if (!valid) return false;
                    refund(this.form2).then((res) => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open = false;
                        } else {
                            this.msgError(res.msg);
                        }
                    })

                })

            }, 1000)

        },
        // 手机号掩码处理
        maskPhoneNumber(phoneNumber) {
            if (!phoneNumber || phoneNumber.length < 7) return phoneNumber;
            return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        },
        // 发送短信
        sendSms(row) {
            sendSms({
                id: row.id
            }).then(res => {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
            })
        },
    }
}


</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;
    
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}


</style>